<template>
  <div class="center_top display-flex fd-column ai-center jc-space-between">
    <div class="center_top-t">
      <div class="center_top-title">{{ title }}</div>
    </div>
    <div class="center_top-main"></div>
  </div>
</template>
<script>
export default {
  name: "center_top",
  data() {
    return {};
  },
  props: {},
  computed: {
    title() {
      return this.$route.query.name + "-抗暴柜监控";
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    getData() {
      this.pageflag = true;
      const res = {
        success: true,
        data: [],
      };
      // eslint-disable-next-line no-empty
      if (res.success) {
      } else {
        this.pageflag = false;
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.center_top {
  height: 100%;
  // border: 1px solid red;
  display: flex;
  .center_top-t {
    width: 90%;
    background-image: url("~@/assets/images/antiknock/center_top-title.png");
    background-size: 100% 100%;
    // border: 1px solid red;
    .center_top-title {
      text-align: center;
      font-size: 25px;
      font-weight: bold;
      line-height: 60px;
      // background: -webkit-linear-gradient(100deg,#72F9F5  ,#28A6FF,#28A6FF);
      background: linear-gradient(
        130deg,
        #28a6ff 30%,
        #72f9f5 50%,
        #28a6ff 70%
      );
      background-clip: text;
      color: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .center_top-main {
    width: 100%;
    height: calc(100% - 90px);
    border: 1px solid yellow;
    background-image: url("~@/assets/images/antiknock/video-bg.png");
    background-size: 100% 100%;
  }
}
</style>
